<template>
  <div style="height: calc(100%);">
    <div v-if="list.length > 0" class="allContent">
      <div class="menu">
        <logo @click="handleEdit" :collapse="false" />
        <div style="height: calc(100% - 50px); overflow: auto;">
          <div @click="menuItemClick(item, index)" class="item" :class="{ item_select: menuIndex == index }"
            v-for="(item, index) in list">
            <el-image style="width: 14px; height: 16px" :src="require('@/assets/images/share_menu_icon.png')"></el-image>
            <div style="flex: 1; margin-left:8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{
              item.title }}</div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="contentTop">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" style="margin-left:24px;">
            <el-form-item label="" prop="name">
              <el-autocomplete style="width: 400px;" popper-class="my-autocomplete" v-model="state" clearable
                :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect">
                <i class="el-icon-edit el-input__icon" slot="suffix">
                </i>
                <template slot-scope="{ item }">
                  <div class="name" v-html="item.key"></div>
                  <!-- <span class="addr">{{ item.address }}</span> -->
                </template>
              </el-autocomplete>
            </el-form-item>
            <el-form-item label="" prop="zoneId">
              <el-select v-model="queryParamsSearch.zoneId" clearable filterable placeholder="请输入分类" style="width:100%;">
                <el-option v-for="item in fenleiOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <!-- <el-button icon="el-icon-edit" size="mini" @click="handleEdit">编辑</el-button> -->
            </el-form-item>
          </el-form>
        </div>

        <div class="content">
          <div class="title">{{ form.title }}</div>
          <div class="jianjie">{{ form.descrip }}</div>
          <div class="desc">
            <div class="bianqianContent" v-for="(item, index) in form.tags">
              <div class="biaoqian">{{ item }}</div>
            </div>
            <div class="zuozhe">作者：{{ form.createBy }}</div>
            <div style="margin-left:20px;">发布于：{{ form.createTime }}</div>
            <div style="margin-left:20px;">专区：{{ form.zoneName }}</div>
          </div>
          <div v-if="form.path && form.path.length > 0" ref="onlyOffice" class="qualityManual-container-office"
            :style="{ height: onlyOfficeHeight + 'px' }">
            <!-- <vab-only-office :option='onlyOfficeOption' /> -->
            <div class="login-wrap" style="position: relative;">
              <vue-office-docx v-if="docxPath && docxPath.length > 0" :src="docxPath" @rendered="rendered"
                :style="{ height: onlyOfficeHeight + 'px' }" />
              <vue-office-excel v-if="excelPath && excelPath.length > 0" :src="excelPath" @rendered="rendered"
                :style="{ height: onlyOfficeHeight + 'px' }" />
              <vue-office-pdf v-if="pdfPath && pdfPath.length > 0" :src="pdfPath" @rendered="rendered"
                :style="{ height: onlyOfficeHeight + 'px' }" />
            </div>
          </div>
          <div class="ql-container" style="margin-top: 20px;">
            <div class="ql-editor" style="padding: 0;" v-html="form.context">
            </div>
          </div>

        </div>
      </div>
    </div>
    <div v-else style="line-height: 300px; text-align: center; color: #999999;">
      还没有任何数据
    </div>

    <!-- 搜索结果列表 -->
    <el-dialog :title="title_search" custom-class="searchDialog" :visible.sync="dialogVisible" width="50%">
      <div @click="searchItemClick(item, index)" v-for="(item, index) in searchList" class="searchItem">
        <div style="font-size: 16px; font-weight: bold;" v-html="item.title"></div>
        <div style="opacity: 0.7; margin-top: 10px;" v-html="item.description"></div>
      </div>

      <!-- 分页 -->
      <pagination v-show="searchTotal > 0" :total="searchTotal" :page.sync="queryParamsSearch.pageNum"
        :limit.sync="queryParamsSearch.pageSize" @pagination="handleSelect" />
    </el-dialog>
  </div>
</template>

<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
// import vabOnlyOffice from '@/views/tool/onlyoffice'
import { article_pageToB, article_hot, article_search, article_detail } from "@/api/article"
import { class_queryPage, class_delete, class_insert, class_update } from "@/api/fenlei"
import Logo from "@/layout/components/Sidebar/Logo";

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  name: 'Index',
  components: {
    // vabOnlyOffice,
    VueOfficeDocx,
    VueOfficePdf,
    VueOfficeExcel,
    Logo,
  },
  data() {
    return {
      queryParams: {
        name: '',
        zoneId: null,
        uid: null,
      },
      menuIndex: 0,
      list: [],

      state: '',

      dialogVisible: false,//搜索结果列表
      title_search: '',
      searchList: [],
      searchTotal: 0,
      queryParamsSearch: {
        context: '',
        tenantId: null,
        zoneId: null,
        type: 1,
        pageNum: 1,
        pageSize: 10,
      },

      form: {
        id: null,
      },
      docxPath: '', //设置文档网络地址，可以是相对地址
      excelPath: '',
      pdfPath: '',
      //参考vabOnlyOffice组件参数配置
      onlyOfficeOption: {
        url: '',
        isEdit: '',
        fileType: '',
        title: '',
        lang: '',
        isPrint: '',
        user: { id: null, name: '' }
      },

      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
      onlyOfficeHeight: 0,

      fenleiOptions: [],//分类列表
    }
  },
  mounted() {
    let uid = this.$route.query.uid;
    console.log(uid);
    if (uid > 0) {
      this.queryParams.uid = uid;
      this.article_pageToB();
    }

    //获取分类列表
    this.getClassList();
  },
  methods: {
    //获取分类列表
    getClassList() {
      class_queryPage({ pageNum: -1 }).then(res => {
        this.fenleiOptions = res.data.records;
      })
    },
    //获取列表
    article_pageToB() {
      article_pageToB({ pageNum: -1, tenantId: this.queryParams.uid, type: 1 }).then(res => {
        this.list = res.data.records;

        this.form.id = this.list[0].id;
        this.getDetail();
      })
    },
    menuItemClick(item, index) {
      this.menuIndex = index;
      this.form.id = item.id;
      this.getDetail();
    },
    handleQuery() {
      this.handleSelect({ value: this.state });
    },
    //异步搜索热门词汇
    querySearchAsync(queryString, cb) {
      console.log(queryString);

      article_hot({ context: queryString }).then(res => {
        let list = res.searchHits;
        let returnList = [];
        for (let i = 0; i < list.length; i++) {
          let hotkey = list[i].content.hotKey;
          let highlightHotkey = list[i].highlightFields.hotKey[0];
          returnList.push({ value: hotkey, key: highlightHotkey });
          cb(returnList);
        }
        cb(returnList);
      })
    },
    //搜索关键词文章
    handleSelect(item) {
      console.log(item);
      this.queryParamsSearch.context = item.value;
      this.queryParamsSearch.tenantId = this.queryParams.uid;
      article_search(this.queryParamsSearch).then(res => {
        this.dialogVisible = true;

        this.searchTotal = res.totalHits;
        this.title_search = '找到 ' + res.totalHits + '条结果';

        let searchList = [];
        for (let index = 0; index < res.searchHits.length; index++) {
          const element = res.searchHits[index];
          let id = element.content.id;

          let title = '';
          let description = '';
          if (element.highlightFields.title) {
            title = element.highlightFields.title[0];
          } else {
            title = element.content.title;
          }
          if (element.highlightFields.description) {
            description = element.highlightFields.description[0];
          } else {
            description = element.content.description;
          }
          searchList.push({ id: id, title: title, description: description });
        }
        this.searchList = searchList;
      })
    },
    searchItemClick(item, index) {
      for (let index = 0; index < this.list.length; index++) {
        const element = this.list[index];
        if (element.elastic == item.id) {
          this.menuIndex = index;

          this.form.id = element.id;
          this.getDetail();
        }
      }

      this.dialogVisible = false;
    },
    //获取文章详情
    getDetail() {
      article_detail({ id: this.form.id }).then(res => {
        this.form = res.data;

        if (this.form.path) {
          var suffix = this.form.path.substring(this.form.path.lastIndexOf(".") + 1);//txt
          console.log(suffix);
          if (suffix == 'pdf') {
            this.pdfPath = this.form.path;
          } else if (suffix == 'docx' || suffix == 'doc') {
            this.docxPath = this.form.path;
          } else if (suffix == 'xls' || suffix == 'xlsx') {
            this.excelPath = this.form.path;
          }
          // this.form.context = '';
          // var suffix = this.form.path.substring(this.form.path.lastIndexOf(".") + 1);//txt
          // var fileName = this.getFileName(this.form.path);

          // this.onlyOfficeOption.isEdit = false
          // this.onlyOfficeOption.lang = 'zh-CN'
          // this.onlyOfficeOption.url = this.form.path
          // this.onlyOfficeOption.title = fileName
          // this.onlyOfficeOption.fileType = suffix
          // this.onlyOfficeOption.isPrint = false
          // this.onlyOfficeOption.user = { id: 12, name: '-' }

          this.$nextTick(function () {
            let marginTop = this.$refs.onlyOffice.getBoundingClientRect().y;
            this.onlyOfficeHeight = this.windowHeight - marginTop;
            console.log(this.onlyOfficeHeight);
          });
        }
      })
    },
    getFileName(o) {
      var pos = o.lastIndexOf("\\");
      return o.substring(pos + 1);
    },
    handleEdit() {
      this.$router.push({
        path: "/knowledge/detail",
        query: { id: this.form.id },
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.highlight {
  color: #fc5531;
}

.allContent {
  display: flex;
  height: calc(100%);

  .menu {
    width: 220px;
    height: calc(100%);
    border-right: solid 3px #f1f1f1;
    overflow: auto;
    background-color: #304156;
    color: #ffffff;

    .item {
      // white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-size: 13px;
      padding: 20px 15px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .item_select {
      background-color: #2F4F4F;
      // color: #333333;
    }
  }

  .content {
    flex: 1;
    padding: 15px;
    overflow: auto;

    .contentTop {
      display: flex;
      justify-content: center;
    }

    .title {
      font-weight: bold;
      font-size: 28px;
    }

    .jianjie {
      color: #555666;
      margin-top: 8px;
      line-height: 30px;
    }

    .desc {
      margin-top: 8px;
      display: flex;
      align-items: center;

      .biaoqian {
        color: #fc5531;
        background-color: #fff5f2;
        padding: 3px 8px;
      }

      .zuozhe {
        margin-left: 15px;
      }
    }

    .caozuo {
      display: flex;
      justify-content: space-between;
    }
  }

}

.searchDialog {
  padding: 30px 0px;
}

::v-deep .el-dialog__body {
  padding: 30px 0px;
}

.searchItem {
  border-bottom: 1px solid #f0f2f5;
  padding: 16px 24px 12px 24px;
  cursor: pointer;
}

.searchItem:hover {
  background-color: #f1f1f1;
}

.qualityManual-container-office {
  margin-top: 20px;
  width: 100%;
}</style>
